<template>
  <div class="home-container">
    <!-- 轮播图 -->
    <lbt-box class="lunbo" :lunbotuList="lunbotu" :isfull="true"></lbt-box>
    <!-- 功能选项 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/newslist" tag="a">
          <img src="../../images/menu1.png" alt="">
          <div class="mui-media-body">新闻资讯</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/photoslist" tag="a">
          <img src="../../images/menu2.png" alt="">
          <div class="mui-media-body">图片分享</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/goodslist" tag="a">
          <img src="../../images/menu3.png" alt="">
          <div class="mui-media-body">商品购买</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu4.png" alt="">
          <div class="mui-media-body">留言反馈</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu5.png" alt="">
          <div class="mui-media-body">视频专区</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu6.png">
          <div class="mui-media-body">联系我们</div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import lunbotuBox from "../subcomponent/lunbotu.vue"
export default {
  data() {
    return {
      lunbotu: []
    };
  },
  created() {
    this.getPhoto();
  },
  methods: {
    getPhoto() {
      this.$http
        .get("api/getlunbo")
        .then(result => {
          if (result.body.status === 0) {
            this.lunbotu = result.body.message;
          }
        });
    }
  },
  components: {
    "lbt-box": lunbotuBox
  }
};
</script>

<style lang="scss" scoped>
.lunbo{
  border-radius: 8px;
  box-shadow: inset 2px 2px 10px #ccc;
  margin: 3px 0 3px 0;
}

.mui-table-view{
    background-color: #fff;
    .mui-table-view-cell{
        font-size: 13px;
        border-radius: 6px;
        box-shadow: inset 2px 2px 5px #ccc;
        box-sizing: border-box;
        img{
            width: 60px;
            height: 60px;
          &:hover{
            transform: rotate(20deg);
          }
        }
    }
}
</style>
